<template>
  <div class="collect-product">
    <div class="material-product-title">我的产品</div>
    <!-- 搜索栏 -->
    <div class="material-product-search">
      <div class="material-product-search-input">
        <el-input
          placeholder="请输入关键词、名称、编号"
          suffix-icon="el-icon-search"
          v-model="keyword"
        >
        </el-input>
      </div>
      <div class="material-product-search-time">
        <el-date-picker
          v-model="timeData"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="material-product-search-submit">
        <el-button type="primary" @click="getCollectProductList"
          >搜索</el-button
        >
      </div>
      <div class="material-product-search-rule">
        <el-button plain>素材名规则设置</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="collect-product-table">
      <el-table
        :data="collectData"
        ref="collectProductTable"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @selection-change="collectProductChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="产品">
          <template slot-scope="scope">
            <div class="product-table">
              <div class="product-table-img">
                <img :src="scope.row.img_path" alt="" />
              </div>
              <div class="product-table-box">
                <div class="product-table-box-title">
                  {{ scope.row.name }}
                </div>
                <div class="product-table-box-name">
                  类目: <span>{{ scope.row.cate.title }}</span>
                </div>
                <div class="product-table-box-name">
                  编号: <span>{{ scope.row.sku }}</span>
                </div>
                <div class="product-table-box-name">
                  材质: <span>{{ scope.row.texture }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格/颜色" width="260">
          <template slot-scope="scope">
            <div class="specification-color">
              <div
                class="specification-color-list"
                v-for="(item, index) in scope.row.color_sku"
                :key="index"
              >
                <div
                  class="specification-color-list-name"
                  :style="{ 'background-color': item.color }"
                ></div>
                <div class="specification-color-list-box">
                  <div
                    class="specification-color-list-box-item"
                    v-for="(child, childIdx) in item.children"
                    :key="childIdx"
                  >
                    {{ child.size }}
                    <span v-if="item.children.length - 1 != childIdx">;</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="design_num" label="设计次数" width="80">
        </el-table-column>
        <el-table-column prop="price" label="售价" width="100">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <div class="collect-product-operation">
              <el-button type="text" @click="getCollectProductInfo(scope.row)"
                >配置</el-button
              >
              <el-button
                type="text"
                style="color: #666"
                @click="onCollectProductInfo(scope.row)"
                >查看</el-button
              >
              <el-button type="text">设计</el-button>
              <el-button
                type="text"
                style="color: #666"
                @click="onProductDelect(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="collect-product-pagination">
      <el-pagination
        @size-change="productSizeChange"
        @current-change="productCurrentChange"
        :current-page="page"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="collectTotal"
      >
      </el-pagination>
    </div>

    <!-- 配置弹窗 -->
    <div class="collect-product-deploy">
      <el-dialog
        title="产品配置"
        :visible.sync="isDeployShow"
        width="50%"
        :close-on-click-modal="false"
        :lock-scroll="true"
        @close="deployClose"
      >
        <CollectProductDeploy
          :list="productData"
          @onDeploySort="onDeploySort"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDeployShow = false">取 消</el-button>
          <el-button type="primary" @click="isDeployShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CollectProductDeploy from './common/collect-product-deploy.vue';
import Collect from '@/api/collect';
import Way from '@/utils/way';
import { MessageBox } from 'element-ui';

export default {
  name: 'CollectProduct',
  components: { CollectProductDeploy },
  props: {
    parentId: {
      type: Number || String,
    },
  },
  data() {
    return {
      keyword: '', // 关键字
      timeData: '', // 选择日期
      productData: {}, // 产品配置列表
      page: 1, // 请求页数
      pageSize: 15, // 请求条数
      isDeployShow: false, // 配置弹窗 是否显示
      collectData: [], // 数据列表
      collectTotal: 0, // 数据总数
    };
  },
  computed: {
    // 时间快捷选择
    pickerOptions() {
      return this.$store.state.layout.pickerOptions;
    },
  },
  watch: {
    parentId(val) {
      this.getCollectProductList();
    },
  },
  created() {
    this.getCollectProductList();
  },
  methods: {
    // 复选框change事件
    collectProductChange(val) {
      console.log(val);
    },
    // 请求页数change事件
    productSizeChange(val) {},
    // 请求条数change事件
    productCurrentChange(val) {},
    // 配置--监听是否关闭
    deployClose() {},

    // 调整排序
    onDeploySort(item, isShow) {
      this.productData.pconfig.forEach((ol) => {
        if (isShow) {
          if (ol.id == item.id) {
            ol.isShow = isShow;
          } else {
            ol.isShow = !isShow;
          }
        } else {
          ol.isShow = isShow;
        }
      });
      // this.$forceUpdate();
    },

    // 获取产品分类
    getCollectProductList() {
      const that = this;
      const params = {
        title: that.keyword,
        cate_id: that.parentId,
        page: that.page,
        limit: that.pageSize,
        type: 0,
      };
      Collect.getCollectProductList(params).then((res) => {
        console.log(res);
        const row = res.data.rows;
        let sku = [];
        row.forEach((om) => {
          om.sku_color.forEach((oj) => {
            if (sku.some((oh) => oh.color == oj.color)) {
              let index = sku.findIndex((ol) => ol.color == oj.color);
              sku[index].children.push(oj);
            } else {
              sku.push({ ...oj, children: [oj] });
            }
          });
          om.color_sku = sku;
        });
        if (res.code == 200) {
          that.collectData = res.data.rows;
          that.collectTotal = res.data.total;
        }
      });
    },

    // 获取产品详情
    getCollectProductInfo(item) {
      console.log(item);
      const that = this;
      let productData = [];
      Collect.getCollectProductInfo({ id: item.id }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          productData = res.data;
          productData.pconfig.forEach((oj) => {
            oj.images = JSON.parse(oj.images);
            oj.images.forEach((ol) => {
              ol.state = parseInt(ol.state);
            });
            oj.isShow = false;
          });
          that.productData = productData;
          that.isDeployShow = true;
        } else {
          that.isDeployShow = false;
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 删除产品
    onProductDelect(item) {
      console.log(item);
      const that = this;

      MessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
      })
        .then(() => {
          Collect.delProductInfo({ id: item.id }).then((res) => {
            if (res.code == 200) {
              Way.setMessage('删除成功', 1);
              const delIndex = that.collectData.findIndex(
                (oj) => oj.id == item.id
              );
              that.collectData.splice(delIndex, 1);
            } else {
              Way.setMessage(res.msg, 3);
            }
            console.log(res);
          });
        })
        .catch(() => {});
    },

    // 查看
    onCollectProductInfo(item) {
      console.log(item);
      this.$router.push({
        name: 'productInfo',
        query: { id: item.product_id },
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/collect-material-product.less';

.collect-product {
  // 列表
  .collect-product-table {
    padding-top: 24px;

    // 产品内容
    .product-table {
      display: flex;

      .product-table-img {
        width: 100px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .product-table-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: calc(100% - 100px);
        padding-left: 12px;
        color: #00091a;

        .product-table-box-title {
          // width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .product-table-box-name {
          span {
            color: #999;
          }
        }
      }
    }

    // 规格/颜色
    .specification-color {
      display: flex;
      flex-direction: column;

      .specification-color-list {
        display: flex;
        align-items: center;

        .specification-color-list-name {
          width: 28px;
          height: 15px;
          // background-color: #f8f8f8;
          border: 1px solid #eee;
        }
        .specification-color-list-box {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          padding-left: 12px;

          .specification-color-list-box-item {
            font-size: 12px;
          }
        }
      }
      .specification-color-list:nth-child(2) .specification-color-list-name {
        background-color: #c7c7c7;
      }
      .specification-color-list:nth-child(3) .specification-color-list-name {
        background-color: #858585;
      }
      .specification-color-list:nth-child(4) .specification-color-list-name {
        background-color: #373737;
      }
    }

    // 操作
    .collect-product-operation {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  //分页
  .collect-product-pagination {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }
}
</style>
